<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>🚀 现代文件浏览器</title>

    <!-- SEO元信息 -->
    <meta name="description" content="最实用的现代文件浏览器和图床管理器，支持多语言切换（中文、英文、日语、韩语），完美适配Cloudflare Pages部署。提供文件预览、一键复制链接、响应式设计等功能。">
    <meta name="keywords" content="文件浏览器,图床管理器,文件管理,Cloudflare Pages,多语言,响应式设计,文件预览,链接复制,现代化界面,静态部署,网页应用,file browser,image hosting,file manager">
    <meta name="author" content="ThinkGin">
    <meta name="robots" content="index, follow">
    <meta name="theme-color" content="#667eea">

    <!-- 网站图标 -->
    <link rel="icon" type="image/png" href="main/icon.png">
    <link rel="shortcut icon" href="main/icon.png">
    <link rel="apple-touch-icon" href="main/icon.png">
    <link rel="apple-touch-icon" sizes="152x152" href="main/icon.png">
    <link rel="apple-touch-icon" sizes="180x180" href="main/icon.png">
    <link rel="apple-touch-icon" sizes="167x167" href="main/icon.png">

    <!-- Open Graph / Facebook -->
    <meta property="og:type" content="website">
    <meta property="og:url" content="https://source.thinkgin.com/">
    <meta property="og:title" content="🚀 现代文件浏览器 - 最实用的图床/文件管理器">
    <meta property="og:description" content="现代化的文件浏览器和图床管理器，支持多语言，完美适配Cloudflare Pages部署。提供文件预览、响应式设计等先进功能。">
    <meta property="og:image" content="https://source.thinkgin.com/source/img/preview.jpg">

    <!-- Twitter -->
    <meta property="twitter:card" content="summary_large_image">
    <meta property="twitter:url" content="https://source.thinkgin.com/">
    <meta property="twitter:title" content="🚀 现代文件浏览器 - 最实用的图床/文件管理器">
    <meta property="twitter:description" content="现代化的文件浏览器和图床管理器，支持多语言，完美适配Cloudflare Pages部署。">
    <meta property="twitter:image" content="https://source.thinkgin.com/source/img/preview.jpg">

    <!-- 移动设备优化 -->
    <meta name="mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
    <meta name="apple-mobile-web-app-title" content="文件浏览器">

    <!-- 搜索引擎和浏览器指令 -->
    <meta name="format-detection" content="telephone=no">
    <meta http-equiv="x-ua-compatible" content="IE=edge">
    <meta name="renderer" content="webkit">

    <!-- 结构化数据 -->
    <script type="application/ld+json">
    {
        "@context": "https://schema.org",
        "@type": "WebApplication",
        "name": "现代文件浏览器",
        "description": "最实用的现代文件浏览器和图床管理器，支持多语言切换，完美适配Cloudflare Pages部署",
        "url": "https://source.thinkgin.com/",
        "author": {
            "@type": "Person",
            "name": "ThinkGin"
        },
        "applicationCategory": "Utility",
        "operatingSystem": "Web Browser",
        "offers": {
            "@type": "Offer",
            "price": "0",
            "priceCurrency": "USD"
        },
        "softwareVersion": "2.0",
        "datePublished": "2024-12-28",
        "inLanguage": ["zh-CN", "en-US", "zh-TW", "ja-JP", "ko-KR"],
        "browserRequirements": "Requires JavaScript. Chrome 80+, Firefox 75+, Safari 13+, Edge 80+"
    }
    </script>

    <!-- 全局错误拦截器 -->
    <script>
        (function() {
            'use strict';
            const EXTENSION_KEYWORDS = [
                'content_scripts', 'extension', 'chrome-extension', 'moz-extension',
                'shadowRoot', 'getShadowDomById', 'handlePanelIsIntersecting'
            ];

            function isExtensionError(error) {
                if (!error) return false;
                const errorStr = String(error);
                const stackStr = error.stack ? String(error.stack) : '';
                const messageStr = error.message ? String(error.message) : '';
                return EXTENSION_KEYWORDS.some(keyword =>
                    errorStr.includes(keyword) || stackStr.includes(keyword) || messageStr.includes(keyword)
                );
            }

            window.addEventListener('error', function(event) {
                if (isExtensionError(event.error) || isExtensionError(event)) {
                    event.stopImmediatePropagation();
                    event.preventDefault();
                    return false;
                }
            }, true);

            window.addEventListener('unhandledrejection', function(event) {
                if (isExtensionError(event.reason)) {
                    event.stopImmediatePropagation();
                    event.preventDefault();
                    return false;
                }
            }, true);
        })();
    </script>

    <style>
        /* 现代化重置和基础样式 */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            -webkit-tap-highlight-color: transparent;
        }

        body {
            font-family: 'SF Pro Display', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            min-height: 100vh;
            color: #333;
            overflow-x: hidden;
        }

        /* 背景动画 */
        body::before {
            content: '';
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background:
                radial-gradient(circle at 20% 50%, rgba(120, 119, 198, 0.3) 0%, transparent 50%),
                radial-gradient(circle at 80% 20%, rgba(255, 119, 198, 0.3) 0%, transparent 50%),
                radial-gradient(circle at 40% 80%, rgba(120, 219, 255, 0.3) 0%, transparent 50%);
            animation: backgroundShift 20s ease-in-out infinite;
            z-index: -1;
        }

        @keyframes backgroundShift {
            0%, 100% { transform: translateX(0) translateY(0); }
            33% { transform: translateX(-30px) translateY(-50px); }
            66% { transform: translateX(30px) translateY(-30px); }
        }

        /* 主容器 */
        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 20px;
            position: relative;
        }

        /* 头部区域 */
        .header {
            text-align: center;
            margin-bottom: 25px;
            margin-top: 70px;
            animation: slideDown 0.6s ease-out;
        }

        .title {
            font-size: clamp(1.6rem, 4vw, 2.8rem);
            font-weight: 700;
            background: linear-gradient(45deg, #fff, #f0f0f0);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            text-shadow: 0 4px 20px rgba(0,0,0,0.3);
            margin-bottom: 10px;
            letter-spacing: -0.02em;
        }

        .subtitle {
            color: rgba(255,255,255,0.9);
            font-size: clamp(0.9rem, 2.5vw, 1.1rem);
            font-weight: 300;
            margin-bottom: 16px;
        }

        /* 语言切换器 */
        .language-switcher {
            position: fixed;
            top: 20px;
            right: 20px;
            z-index: 9999;
            animation: slideDown 0.6s ease-out 0.1s both;
        }

        .lang-btn {
            display: flex;
            align-items: center;
            gap: 6px;
            padding: 8px 12px;
            background: rgba(255,255,255,0.12);
            backdrop-filter: blur(20px);
            border: 1px solid rgba(255,255,255,0.25);
            border-radius: 20px;
            color: rgba(255,255,255,0.95);
            font-size: 0.85rem;
            font-weight: 500;
            cursor: pointer;
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            box-shadow: 0 4px 20px rgba(0,0,0,0.08);
        }

        .lang-btn:hover {
            background: rgba(255,255,255,0.2);
            color: white;
            transform: translateY(-1px);
            box-shadow: 0 6px 25px rgba(0,0,0,0.12);
        }

        .lang-icon {
            font-size: 1rem;
        }

        .lang-arrow {
            font-size: 0.7rem;
            transition: transform 0.3s ease;
        }

        .lang-btn.active .lang-arrow {
            transform: rotate(180deg);
        }

        .lang-dropdown {
            position: absolute;
            top: calc(100% + 8px);
            right: 0;
            min-width: 150px;
            background: rgba(255,255,255,0.95);
            backdrop-filter: blur(25px);
            border: 1px solid rgba(255,255,255,0.3);
            border-radius: 12px;
            box-shadow: 0 8px 32px rgba(0,0,0,0.12);
            opacity: 0;
            visibility: hidden;
            transform: translateY(-10px);
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            overflow: hidden;
        }

        .lang-dropdown.show {
            opacity: 1;
            visibility: visible;
            transform: translateY(0);
        }

        .lang-option {
            padding: 10px 14px;
            color: #2c3e50;
            font-size: 0.8rem;
            font-weight: 500;
            cursor: pointer;
            transition: all 0.2s ease;
            border-bottom: 1px solid rgba(0,0,0,0.05);
        }

        .lang-option:last-child {
            border-bottom: none;
        }

        .lang-option:hover {
            background: rgba(102, 126, 234, 0.1);
            color: #667eea;
        }

        .lang-option.active {
            background: rgba(102, 126, 234, 0.15);
            color: #667eea;
            font-weight: 600;
        }

        /* 悬浮GitHub按钮 */
        .floating-github {
            position: fixed;
            bottom: 20px;
            right: 20px;
            z-index: 1000;
            animation: slideUp 0.6s ease-out 0.8s both;
        }

        .floating-github-btn {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 56px;
            height: 56px;
            background: rgba(0,0,0,0.8);
            backdrop-filter: blur(20px);
            border: 2px solid rgba(255,255,255,0.1);
            border-radius: 50%;
            color: white;
            text-decoration: none;
            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
            box-shadow: 0 8px 32px rgba(0,0,0,0.2);
        }

        .floating-github-btn:hover {
            background: rgba(0,0,0,0.9);
            color: white;
            transform: translateY(-3px) scale(1.05);
            box-shadow: 0 12px 40px rgba(0,0,0,0.3);
            border-color: rgba(255,255,255,0.2);
        }

        .floating-github-icon {
            width: 24px;
            height: 24px;
            transition: transform 0.3s ease;
        }

        .floating-github-btn:hover .floating-github-icon {
            transform: scale(1.1);
        }

        /* 搜索和过滤区域 */
        .controls {
            background: rgba(255,255,255,0.1);
            backdrop-filter: blur(20px);
            border-radius: 20px;
            padding: 18px;
            margin-bottom: 25px;
            border: 1px solid rgba(255,255,255,0.2);
            animation: slideUp 0.6s ease-out 0.2s both;
        }

        .search-container {
            position: relative;
            margin-bottom: 18px;
        }

        .search-bar {
            width: 100%;
            padding: 12px 40px 12px 16px;
            font-size: 15px;
            border: none;
            border-radius: 50px;
            background: rgba(255,255,255,0.9);
            backdrop-filter: blur(10px);
            box-shadow: 0 6px 25px rgba(0,0,0,0.1);
            transition: all 0.3s ease;
            font-weight: 500;
        }

        .search-bar:focus {
            outline: none;
            background: white;
            box-shadow: 0 8px 30px rgba(0,0,0,0.15);
            transform: translateY(-1px);
        }

        .search-icon {
            position: absolute;
            right: 14px;
            top: 50%;
            transform: translateY(-50%);
            font-size: 1.1rem;
            color: #667eea;
        }

        /* 过滤标签 */
        .filter-tabs {
            display: flex;
            gap: 8px;
            justify-content: center;
            flex-wrap: wrap;
        }

        .filter-tab {
            padding: 8px 16px;
            border-radius: 50px;
            background: rgba(255,255,255,0.15);
            border: 2px solid rgba(255,255,255,0.2);
            color: white;
            font-weight: 500;
            cursor: pointer;
            transition: all 0.3s ease;
            backdrop-filter: blur(10px);
            user-select: none;
            font-size: 0.85rem;
        }

        .filter-tab:hover {
            background: rgba(255,255,255,0.25);
            transform: translateY(-1px);
        }

        .filter-tab.active {
            background: white;
            color: #667eea;
            border-color: white;
            box-shadow: 0 6px 20px rgba(0,0,0,0.15);
        }

        /* 统计信息 - PC端 */
        .stats-desktop {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
            gap: 12px;
            margin-bottom: 25px;
            animation: slideUp 0.6s ease-out 0.4s both;
        }

        /* 统计信息 - 手机端（默认隐藏） */
        .stats-mobile {
            display: none;
            margin-bottom: 20px;
            animation: slideUp 0.6s ease-out 0.4s both;
        }

        .mobile-stats-line {
            background: rgba(255,255,255,0.15);
            backdrop-filter: blur(20px);
            border-radius: 15px;
            padding: 8px 12px;
            border: 1px solid rgba(255,255,255,0.2);
            display: flex;
            justify-content: space-between;
            align-items: center;
            flex-wrap: wrap;
            gap: 8px;
        }

        .mobile-stat {
            color: rgba(255,255,255,0.9);
            font-size: 0.8rem;
            font-weight: 400;
        }

        .mobile-stat strong {
            color: white;
            font-weight: 600;
            text-shadow: 0 1px 3px rgba(0,0,0,0.3);
        }

        .stat-card {
            background: rgba(255,255,255,0.15);
            backdrop-filter: blur(20px);
            border-radius: 15px;
            padding: 12px;
            text-align: center;
            border: 1px solid rgba(255,255,255,0.2);
            transition: all 0.3s ease;
        }

        .stat-card:hover {
            background: rgba(255,255,255,0.25);
            transform: translateY(-3px);
        }

        .stat-number {
            font-size: 1.4rem;
            font-weight: 700;
            color: white;
            margin-bottom: 2px;
            text-shadow: 0 2px 10px rgba(0,0,0,0.3);
        }

        .stat-label {
            font-size: 0.75rem;
            color: rgba(255,255,255,0.8);
            font-weight: 500;
        }

        /* 文件网格 */
        .files-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
            gap: 18px;
            animation: fadeIn 0.6s ease-out 0.6s both;
        }

        /* 文件卡片 */
        .file-card {
            background: rgba(255,255,255,0.95);
            backdrop-filter: blur(20px);
            border-radius: 16px;
            padding: 18px;
            border: 1px solid rgba(255,255,255,0.3);
            transition: all 0.3s ease;
            cursor: pointer;
            position: relative;
            overflow: hidden;
        }

        .file-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
            transition: left 0.6s ease;
        }

        .file-card:hover::before {
            left: 100%;
        }

        .file-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 15px 40px rgba(0,0,0,0.15);
            background: white;
        }

        /* 文件图标区域 */
        .file-icon-area {
            text-align: center;
            margin-bottom: 12px;
            position: relative;
        }

        .file-icon {
            font-size: 2.2rem;
            margin-bottom: 6px;
            display: block;
        }

        /* 图片预览 */
        .image-preview {
            width: 100%;
            height: 140px;
            object-fit: cover;
            border-radius: 10px;
            margin-bottom: 10px;
            cursor: zoom-in;
            transition: all 0.3s ease;
        }

        .image-preview:hover {
            transform: scale(1.02);
            box-shadow: 0 6px 20px rgba(0,0,0,0.2);
        }

        /* 文件信息 */
        .file-info {
            text-align: center;
        }

        .file-name {
            font-size: 1rem;
            font-weight: 600;
            color: #2c3e50;
            margin-bottom: 6px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            line-height: 1.3;
        }

        .file-meta {
            font-size: 0.75rem;
            color: #666;
            margin-bottom: 10px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            line-height: 1.3;
        }

        .file-size {
            display: inline-block;
            background: #667eea;
            color: white;
            padding: 3px 10px;
            border-radius: 15px;
            font-size: 0.7rem;
            font-weight: 500;
            margin-bottom: 10px;
        }

        /* 文件操作按钮 */
        .file-actions {
            display: flex;
            gap: 6px;
            justify-content: center;
            flex-wrap: nowrap;
        }

        .btn {
            padding: 6px 12px;
            border: none;
            border-radius: 15px;
            font-size: 0.7rem;
            font-weight: 500;
            cursor: pointer;
            transition: all 0.3s ease;
            display: inline-flex;
            align-items: center;
            gap: 4px;
            text-decoration: none;
            white-space: nowrap;
            min-width: 0;
            flex: 1;
        }

        .btn-primary {
            background: linear-gradient(135deg, #667eea, #764ba2);
            color: white;
        }

        .btn-secondary {
            background: rgba(102, 126, 234, 0.1);
            color: #667eea;
            border: 1px solid rgba(102, 126, 234, 0.3);
        }

        .btn:hover {
            transform: translateY(-1px);
            box-shadow: 0 4px 12px rgba(0,0,0,0.2);
        }

        .btn:active {
            transform: translateY(0);
        }

        /* 全屏图片模态框 */
        .image-modal {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0,0,0,0.9);
            backdrop-filter: blur(10px);
            z-index: 1000;
            display: none;
            align-items: center;
            justify-content: center;
            cursor: zoom-out;
        }

        .modal-image {
            max-width: 95%;
            max-height: 95%;
            object-fit: contain;
            border-radius: 15px;
            box-shadow: 0 25px 100px rgba(0,0,0,0.5);
            animation: modalZoom 0.3s ease-out;
        }

        .modal-close {
            position: absolute;
            top: 30px;
            right: 30px;
            width: 50px;
            height: 50px;
            background: rgba(255,255,255,0.2);
            backdrop-filter: blur(10px);
            border: none;
            border-radius: 50%;
            color: white;
            font-size: 1.5rem;
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .modal-close:hover {
            background: rgba(255,255,255,0.3);
            transform: scale(1.1);
        }

        /* 文件详情模态框 */
        .file-info-modal {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0,0,0,0.7);
            backdrop-filter: blur(20px);
            z-index: 10000;
            align-items: center;
            justify-content: center;
            animation: fadeIn 0.3s ease;
            padding: 20px;
            box-sizing: border-box;
        }

        .file-info-content {
            background: rgba(255,255,255,0.95);
            backdrop-filter: blur(30px);
            border-radius: 20px;
            box-shadow: 0 20px 60px rgba(0,0,0,0.3);
            border: 1px solid rgba(255,255,255,0.4);
            max-width: 500px;
            width: 100%;
            max-height: 90vh;
            overflow: hidden;
            animation: slideUpModal 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        }

        @keyframes slideUpModal {
            from {
                opacity: 0;
                transform: translateY(30px) scale(0.95);
            }
            to {
                opacity: 1;
                transform: translateY(0) scale(1);
            }
        }

        .file-info-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 20px 25px 15px;
            border-bottom: 1px solid rgba(0,0,0,0.08);
            background: linear-gradient(135deg, rgba(102, 126, 234, 0.05), rgba(118, 75, 162, 0.05));
        }

        .file-info-title {
            margin: 0;
            font-size: 1.25rem;
            font-weight: 600;
            color: #2c3e50;
            background: linear-gradient(135deg, #667eea, #764ba2);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }

        .file-info-close {
            background: rgba(0,0,0,0.05);
            color: #666;
            border: none;
            width: 32px;
            height: 32px;
            border-radius: 50%;
            font-size: 18px;
            cursor: pointer;
            transition: all 0.3s ease;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .file-info-close:hover {
            background: rgba(255,0,0,0.1);
            color: #e74c3c;
            transform: scale(1.1);
        }

        .file-info-body {
            padding: 25px;
            display: flex;
            gap: 20px;
            align-items: flex-start;
        }

        .file-info-preview {
            flex-shrink: 0;
            width: 80px;
            height: 80px;
            border-radius: 16px;
            background: linear-gradient(135deg, #667eea, #764ba2);
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 8px 25px rgba(102, 126, 234, 0.3);
            position: relative;
            overflow: hidden;
        }

        .file-info-icon {
            font-size: 2.5rem;
            filter: drop-shadow(0 2px 8px rgba(0,0,0,0.2));
        }

        .file-info-preview img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            border-radius: 16px;
        }

        .file-info-details {
            flex: 1;
            display: flex;
            flex-direction: column;
            gap: 12px;
        }

        .file-detail-item {
            display: flex;
            align-items: flex-start;
            justify-content: space-between;
            padding: 8px 0;
            border-bottom: 1px solid rgba(0,0,0,0.05);
        }

        .file-detail-item:last-child {
            border-bottom: none;
        }

        .detail-label {
            font-weight: 600;
            color: #64748b;
            font-size: 0.85rem;
            min-width: 70px;
            margin-right: 15px;
        }

        .detail-value {
            font-weight: 500;
            color: #2c3e50;
            font-size: 0.9rem;
            text-align: right;
            word-break: break-all;
            flex: 1;
        }

        .detail-link {
            font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
            font-size: 0.8rem;
            background: rgba(102, 126, 234, 0.1);
            padding: 4px 8px;
            border-radius: 6px;
            color: #667eea;
            border: 1px solid rgba(102, 126, 234, 0.2);
        }

        .file-info-actions {
            padding: 20px 25px;
            border-top: 1px solid rgba(0,0,0,0.08);
            display: flex;
            gap: 12px;
            background: rgba(0,0,0,0.02);
        }

        .file-info-copy {
            flex: 1;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 6px;
            padding: 12px 20px;
            font-weight: 600;
            border-radius: 12px;
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        }

        .file-info-cancel {
            padding: 12px 20px;
            font-weight: 600;
            border-radius: 12px;
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        }

        /* 空状态 */
        .empty-state {
            text-align: center;
            padding: 60px 20px;
            color: rgba(255,255,255,0.8);
            grid-column: 1 / -1;
        }

        .empty-icon {
            font-size: 4rem;
            margin-bottom: 20px;
            opacity: 0.6;
        }

        .empty-text {
            font-size: 1.2rem;
            font-weight: 500;
        }

        /* 加载动画 */
        .loading {
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 40px;
            grid-column: 1 / -1;
        }

        .spinner {
            width: 40px;
            height: 40px;
            border: 3px solid rgba(255,255,255,0.3);
            border-top: 3px solid white;
            border-radius: 50%;
            animation: spin 1s linear infinite;
        }

        /* 提示框 */
        .toast {
            position: fixed;
            bottom: 30px;
            left: 50%;
            transform: translateX(-50%);
            background: rgba(0,0,0,0.8);
            backdrop-filter: blur(10px);
            color: white;
            padding: 15px 25px;
            border-radius: 50px;
            font-weight: 500;
            z-index: 1001;
            animation: toastSlide 0.3s ease-out;
        }

        /* 关键帧动画 */
        @keyframes slideDown {
            from { opacity: 0; transform: translateY(-30px); }
            to { opacity: 1; transform: translateY(0); }
        }

        @keyframes slideUp {
            from { opacity: 0; transform: translateY(30px); }
            to { opacity: 1; transform: translateY(0); }
        }

        @keyframes fadeIn {
            from { opacity: 0; }
            to { opacity: 1; }
        }

        @keyframes spin {
            from { transform: rotate(0deg); }
            to { transform: rotate(360deg); }
        }

        @keyframes modalZoom {
            from { opacity: 0; transform: scale(0.8); }
            to { opacity: 1; transform: scale(1); }
        }

        @keyframes toastSlide {
            from { opacity: 0; transform: translateX(-50%) translateY(20px); }
            to { opacity: 1; transform: translateX(-50%) translateY(0); }
        }

        /* 响应式设计 */
        @media (max-width: 768px) {
            .container {
                padding: 15px;
            }

            .controls {
            padding: 20px;
                margin-bottom: 30px;
            }

            .filter-tabs {
                gap: 8px;
            }

            .filter-tab {
                padding: 10px 18px;
                font-size: 0.9rem;
            }

            .files-grid {
                grid-template-columns: 1fr;
                gap: 20px;
            }

            .file-card {
                padding: 20px;
            }

            .stats {
                grid-template-columns: repeat(2, 1fr);
                gap: 15px;
                margin-bottom: 30px;
            }

            .stat-number {
                font-size: 1.6rem;
            }

            .modal-close {
                top: 20px;
                right: 20px;
                width: 45px;
                height: 45px;
            }
        }

        @media (max-width: 480px) {
            .container {
                padding: 10px;
            }

            .title {
                font-size: 2rem;
            }

            .subtitle {
                font-size: 1rem;
            }

            .controls {
            padding: 15px;
                border-radius: 20px;
            }

            .search-bar {
                padding: 14px 45px 14px 18px;
            }

            .filter-tab {
                padding: 8px 15px;
                font-size: 0.85rem;
            }

            .stats {
                grid-template-columns: 1fr;
                gap: 12px;
            }

            .file-card {
                padding: 18px;
                border-radius: 15px;
            }

            .image-preview {
                height: 150px;
            }

            .btn {
                padding: 6px 12px;
                font-size: 0.75rem;
            }
        }

        /* 手机端响应式优化 - 美观版 */
        @media (max-width: 768px) {
            .container {
                padding: 12px;
                gap: 18px;
            }

            .title {
                font-size: clamp(1.6rem, 5vw, 2.4rem);
                margin-bottom: 8px;
                text-shadow: 0 6px 25px rgba(0,0,0,0.4);
            }

            .subtitle {
                font-size: clamp(0.85rem, 3vw, 1.1rem);
                margin-bottom: 18px;
                opacity: 0.95;
            }

            .header {
                margin-bottom: 25px;
            }

            .github-link {
                margin-bottom: 18px;
            }

            .github-btn {
                padding: 8px 16px;
                font-size: 0.85rem;
                gap: 6px;
            }

            .github-icon {
                width: 16px;
                height: 16px;
            }

            .controls {
                padding: 16px;
            border-radius: 20px;
                margin-bottom: 22px;
                background: rgba(255,255,255,0.12);
                border: 1px solid rgba(255,255,255,0.25);
                box-shadow: 0 8px 32px rgba(0,0,0,0.1);
            }

            .search-container {
                margin-bottom: 0;
        }

        .search-bar {
                padding: 12px 40px 12px 16px;
                font-size: 15px;
                border-radius: 25px;
                background: rgba(255,255,255,0.95);
                box-shadow: 0 4px 20px rgba(0,0,0,0.08);
        }

        .search-bar:focus {
                background: white;
                box-shadow: 0 6px 30px rgba(0,0,0,0.12);
                transform: translateY(-1px);
            }

            .search-icon {
                right: 14px;
                font-size: 1.1rem;
                color: #667eea;
            }

            /* 隐藏过滤标签和PC端统计 */
            .filter-tabs {
                display: none !important;
            }

            .stats-desktop {
                display: none !important;
            }

            /* 显示手机端统计 */
            .stats-mobile {
                display: block !important;
                margin-bottom: 22px;
            }

            .mobile-stats-line {
                background: rgba(255,255,255,0.18);
                backdrop-filter: blur(25px);
                border-radius: 18px;
                padding: 10px 14px;
                border: 1px solid rgba(255,255,255,0.3);
                box-shadow: 0 6px 25px rgba(0,0,0,0.08);
            }

            .mobile-stat {
                color: rgba(255,255,255,0.95);
                font-size: 0.8rem;
                font-weight: 500;
            }

            .mobile-stat strong {
            color: white;
                font-weight: 700;
                text-shadow: 0 2px 8px rgba(0,0,0,0.3);
        }

            /* 文件网格改为双列 - 优化间距 */
        .files-grid {
                grid-template-columns: 1fr 1fr !important;
                gap: 14px;
            }

            .file-card {
                padding: 14px;
                border-radius: 16px;
                background: rgba(255,255,255,0.97);
                border: 1px solid rgba(255,255,255,0.4);
                box-shadow: 0 6px 25px rgba(0,0,0,0.08);
                transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            }

            .file-card:hover {
            transform: translateY(-2px);
                box-shadow: 0 12px 40px rgba(0,0,0,0.12);
                background: white;
        }

        .file-icon {
            font-size: 2rem;
                margin-bottom: 6px;
                filter: drop-shadow(0 2px 8px rgba(0,0,0,0.1));
            }

            .file-icon-area {
                margin-bottom: 10px;
            }

            .image-preview {
                height: 100px;
                border-radius: 12px;
                margin-bottom: 8px;
                box-shadow: 0 4px 16px rgba(0,0,0,0.1);
                transition: all 0.3s ease;
            }

            .image-preview:hover {
                transform: scale(1.02);
                box-shadow: 0 6px 20px rgba(0,0,0,0.15);
        }

        .file-name {
                font-size: 0.95rem;
                margin-bottom: 6px;
            font-weight: 600;
            color: #2c3e50;
                line-height: 1.3;
        }

        .file-meta {
                font-size: 0.75rem;
                margin-bottom: 8px;
                color: #64748b;
                line-height: 1.2;
            }

            .file-size {
                padding: 4px 10px;
                font-size: 0.7rem;
                margin-bottom: 10px;
                border-radius: 16px;
                background: linear-gradient(135deg, #667eea, #764ba2);
                color: white;
                font-weight: 600;
                text-shadow: 0 1px 3px rgba(0,0,0,0.2);
                box-shadow: 0 3px 12px rgba(102, 126, 234, 0.3);
        }

        .file-actions {
                gap: 6px;
                margin-top: 2px;
        }

        .btn {
                padding: 6px 10px;
                font-size: 0.7rem;
                border-radius: 14px;
                gap: 3px;
                font-weight: 600;
                transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
                box-shadow: 0 2px 8px rgba(0,0,0,0.1);
            }

            .btn:hover {
                transform: translateY(-1px);
                box-shadow: 0 4px 16px rgba(0,0,0,0.15);
        }

        .btn-primary {
            background: linear-gradient(135deg, #667eea, #764ba2);
                border: none;
            color: white;
                text-shadow: 0 1px 3px rgba(0,0,0,0.2);
            }

            .btn-secondary {
                background: rgba(102, 126, 234, 0.12);
                color: #667eea;
                border: 1px solid rgba(102, 126, 234, 0.25);
                backdrop-filter: blur(10px);
            }
        }

        /* 小屏手机端优化 - 精致美观版 */
        @media (max-width: 480px) {
            .container {
                padding: 10px;
                gap: 16px;
            }

            .title {
                font-size: clamp(1.4rem, 6vw, 2rem);
                margin-bottom: 6px;
                text-shadow: 0 4px 20px rgba(0,0,0,0.4);
            }

            .subtitle {
                font-size: clamp(0.8rem, 3.5vw, 1rem);
                margin-bottom: 14px;
                opacity: 0.9;
            }

            .header {
                margin-bottom: 18px;
            }

            .github-link {
                margin-bottom: 16px;
            }

            .github-btn {
                padding: 7px 14px;
                font-size: 0.8rem;
                gap: 5px;
                border-radius: 20px;
            }

            .github-icon {
                width: 15px;
                height: 15px;
            }

            .controls {
                padding: 12px;
                border-radius: 18px;
                margin-bottom: 18px;
                background: rgba(255,255,255,0.15);
                border: 1px solid rgba(255,255,255,0.3);
                box-shadow: 0 6px 25px rgba(0,0,0,0.08);
            }

            .search-bar {
                padding: 10px 35px 10px 14px;
                font-size: 14px;
                border-radius: 20px;
                background: rgba(255,255,255,0.96);
                box-shadow: 0 3px 15px rgba(0,0,0,0.06);
            }

            .search-bar:focus {
                background: white;
                box-shadow: 0 5px 25px rgba(0,0,0,0.1);
                transform: translateY(-0.5px);
            }

            .search-icon {
                right: 12px;
                font-size: 1rem;
                color: #667eea;
            }

            .stats-mobile {
                margin-bottom: 18px;
            }

            .mobile-stats-line {
                padding: 8px 12px;
                gap: 6px;
                border-radius: 16px;
                background: rgba(255,255,255,0.2);
                backdrop-filter: blur(20px);
                border: 1px solid rgba(255,255,255,0.35);
                box-shadow: 0 4px 20px rgba(0,0,0,0.06);
            }

            .mobile-stat {
                font-size: 0.7rem;
                color: rgba(255,255,255,0.95);
                font-weight: 500;
            }

            .mobile-stat strong {
            color: white;
                font-weight: 700;
                text-shadow: 0 1px 6px rgba(0,0,0,0.3);
            }

            .files-grid {
                grid-template-columns: 1fr 1fr !important;
                gap: 10px;
            }

            .file-card {
                padding: 10px;
                border-radius: 14px;
                background: rgba(255,255,255,0.98);
                border: 1px solid rgba(255,255,255,0.5);
                box-shadow: 0 4px 20px rgba(0,0,0,0.06);
                transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            }

            .file-card:hover {
                transform: translateY(-1px);
                box-shadow: 0 8px 30px rgba(0,0,0,0.1);
                background: white;
            }

            .file-icon {
                font-size: 1.6rem;
                margin-bottom: 4px;
                filter: drop-shadow(0 1px 6px rgba(0,0,0,0.08));
            }

            .file-icon-area {
                margin-bottom: 6px;
            }

            .image-preview {
                height: 70px;
                border-radius: 10px;
                margin-bottom: 6px;
                box-shadow: 0 3px 12px rgba(0,0,0,0.08);
                transition: all 0.3s ease;
            }

            .image-preview:hover {
                transform: scale(1.01);
                box-shadow: 0 4px 16px rgba(0,0,0,0.12);
            }

            .file-name {
                font-size: 0.85rem;
                margin-bottom: 4px;
                font-weight: 600;
                color: #2c3e50;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
                line-height: 1.2;
            }

            .file-meta {
                font-size: 0.65rem;
                margin-bottom: 6px;
                color: #64748b;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
                line-height: 1.1;
            }

            .file-size {
                padding: 3px 8px;
                font-size: 0.65rem;
                margin-bottom: 8px;
                border-radius: 14px;
                background: linear-gradient(135deg, #667eea, #764ba2);
                color: white;
                font-weight: 600;
                text-shadow: 0 1px 2px rgba(0,0,0,0.2);
                box-shadow: 0 2px 8px rgba(102, 126, 234, 0.25);
            }

            .file-actions {
                gap: 4px;
                flex-direction: row;
                flex-wrap: nowrap;
            }

            .btn {
                padding: 5px 8px;
                font-size: 0.65rem;
                border-radius: 12px;
                gap: 2px;
                flex: 1;
                justify-content: center;
                white-space: nowrap;
                min-width: 0;
                font-weight: 600;
                transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
                box-shadow: 0 1px 6px rgba(0,0,0,0.08);
            }

            .btn:hover {
                transform: translateY(-0.5px);
                box-shadow: 0 3px 12px rgba(0,0,0,0.12);
            }

            .btn-primary {
                background: linear-gradient(135deg, #667eea, #764ba2);
                border: none;
                color: white;
                text-shadow: 0 1px 2px rgba(0,0,0,0.2);
            }

            .btn-secondary {
                background: rgba(102, 126, 234, 0.15);
            color: #667eea;
                border: 1px solid rgba(102, 126, 234, 0.3);
                backdrop-filter: blur(8px);
            }
        }

        /* 横屏优化 */
        @media (max-width: 768px) and (orientation: landscape) {
            .header {
                margin-bottom: 20px;
            }

            .title {
                font-size: 2rem;
                margin-bottom: 10px;
            }

            .subtitle {
                font-size: 0.9rem;
                margin-bottom: 12px;
            }

            .github-link {
            margin-bottom: 15px;
            }

            .github-btn {
                padding: 6px 12px;
                font-size: 0.8rem;
            }

            .github-icon {
                width: 14px;
                height: 14px;
            }

            .controls {
                padding: 15px;
                margin-bottom: 20px;
            }

            .stats-mobile {
                margin-bottom: 20px;
            }

            .image-preview {
                height: 120px;
            }

            /* 手机端语言切换器 */
            .language-switcher {
                top: 10px !important;
                right: 10px !important;
            }

            .lang-btn {
                padding: 6px 8px !important;
                font-size: 0.75rem !important;
                gap: 3px !important;
                border-radius: 16px !important;
            }

            .lang-dropdown {
                min-width: 120px !important;
                top: calc(100% + 5px) !important;
            }

            .lang-option {
                padding: 8px 10px !important;
                font-size: 0.7rem !important;
            }

            /* 手机端头部适配 */
            .header {
                margin-top: 55px !important;
                margin-bottom: 20px !important;
            }

            .title {
                font-size: 1.6rem !important;
                margin-bottom: 8px !important;
            }

            .subtitle {
                font-size: 0.8rem !important;
                margin-bottom: 12px !important;
                padding: 0 10px !important;
            }

            /* 手机端悬浮GitHub按钮 */
            .floating-github {
                bottom: 15px !important;
                right: 15px !important;
            }

            .floating-github-btn {
                width: 48px !important;
                height: 48px !important;
            }

            .floating-github-icon {
                width: 20px !important;
                height: 20px !important;
            }
        }

        /* 小屏手机专用样式 */
        @media (max-width: 480px) {
            .language-switcher {
                top: 8px !important;
                right: 8px !important;
            }

            .lang-btn {
                padding: 5px 6px !important;
                font-size: 0.7rem !important;
                gap: 2px !important;
            }

            .lang-dropdown {
                min-width: 110px !important;
                max-width: calc(100vw - 25px) !important;
                right: 0 !important;
            }

            .lang-option {
                padding: 6px 8px !important;
                font-size: 0.65rem !important;
            }

            .header {
                margin-top: 45px !important;
            }

            .title {
                font-size: 1.4rem !important;
            }

            .subtitle {
                font-size: 0.75rem !important;
                padding: 0 15px !important;
            }

            .controls {
                padding: 12px !important;
                margin-bottom: 18px !important;
            }

            /* 手机端文件详情模态框 */
            .file-info-content {
                max-width: calc(100vw - 20px) !important;
                margin: 0 10px !important;
            }

            .file-info-body {
                flex-direction: column !important;
                gap: 15px !important;
                padding: 20px !important;
            }

            .file-info-preview {
                width: 60px !important;
                height: 60px !important;
                align-self: center !important;
            }

            .file-info-icon {
                font-size: 2rem !important;
            }

            .file-detail-item {
                flex-direction: column !important;
                align-items: flex-start !important;
                gap: 4px !important;
            }

            .detail-value {
                text-align: left !important;
                word-break: break-word !important;
            }

            .file-info-actions {
                flex-direction: column !important;
                gap: 8px !important;
                padding: 15px 20px !important;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <!-- 语言切换器 -->
        <div class="language-switcher">
            <button class="lang-btn" id="langBtn">
                <span class="lang-icon">🌐</span>
                <span class="lang-text" id="currentLang">中文</span>
                <span class="lang-arrow">▼</span>
            </button>
            <div class="lang-dropdown" id="langDropdown">
                <div class="lang-option" data-lang="zh-CN">🇨🇳 中文简体</div>
                <div class="lang-option" data-lang="en">🇺🇸 English</div>
                <div class="lang-option" data-lang="zh-TW">🇹🇼 中文繁體</div>
                <div class="lang-option" data-lang="ja">🇯🇵 日本語</div>
                <div class="lang-option" data-lang="ko">🇰🇷 한국어</div>
            </div>
        </div>

        <!-- 头部区域 -->
        <header class="header">
            <h1 class="title" data-i18n="title">🚀 现代文件浏览器</h1>
            <p class="subtitle" data-i18n="subtitle">最实用的床图/文件管理器(个人版) 完美适配 Cloudflare Pages 部署</p>
        </header>

        <!-- 悬浮GitHub链接 -->
        <div class="floating-github">
            <a href="https://github.com/thinkgin/source" target="_blank" rel="noopener noreferrer" class="floating-github-btn" title="GitHub Repository">
                <svg class="floating-github-icon" viewBox="0 0 24 24" fill="currentColor">
                    <path d="M12 0C5.37 0 0 5.37 0 12c0 5.31 3.435 9.795 8.205 11.385.6.105.825-.255.825-.57 0-.285-.015-1.23-.015-2.235-3.015.555-3.795-.735-4.035-1.41-.135-.345-.72-1.41-1.23-1.695-.42-.225-1.02-.78-.015-.795.945-.015 1.62.87 1.845 1.23 1.08 1.815 2.805 1.305 3.495.99.105-.78.42-1.305.765-1.605-2.67-.3-5.46-1.335-5.46-5.925 0-1.305.465-2.385 1.23-3.225-.12-.3-.54-1.53.12-3.18 0 0 1.005-.315 3.3 1.23.96-.27 1.98-.405 3-.405s2.04.135 3 .405c2.295-1.56 3.3-1.23 3.3-1.23.66 1.65.24 2.88.12 3.18.765.84 1.23 1.905 1.23 3.225 0 4.605-2.805 5.625-5.475 5.925.435.375.81 1.095.81 2.22 0 1.605-.015 2.895-.015 3.3 0 .315.225.69.825.57A12.02 12.02 0 0024 12c0-6.63-5.37-12-12-12z"/>
                </svg>
            </a>
                    </div>

        <!-- 控制区域 -->
        <section class="controls">
            <div class="search-container">
                <input type="text" class="search-bar" data-i18n-placeholder="search_placeholder" placeholder="搜索文件..." id="searchInput">
                <span class="search-icon">🔍</span>
                    </div>

            <div class="filter-tabs" id="filterTabs">
                <div class="filter-tab active" data-filter="all" data-i18n="all_files">全部文件</div>
                <div class="filter-tab" data-filter="javascript" data-i18n="javascript">JavaScript</div>
                <div class="filter-tab" data-filter="stylesheet" data-i18n="css">CSS</div>
                <div class="filter-tab" data-filter="image" data-i18n="images">图片</div>
                <div class="filter-tab" data-filter="other" data-i18n="others">其他</div>
                    </div>
        </section>

        <!-- 统计信息 - PC端 -->
        <section class="stats stats-desktop" id="stats">
            <div class="stat-card">
                <div class="stat-number" id="totalFiles">-</div>
                <div class="stat-label" data-i18n="total_files">总文件</div>
                        </div>
            <div class="stat-card">
                <div class="stat-number" id="totalSize">-</div>
                <div class="stat-label" data-i18n="total_size">总大小</div>
                        </div>
            <div class="stat-card">
                <div class="stat-number" id="jsFiles">-</div>
                <div class="stat-label" data-i18n="js_files">JS文件</div>
                        </div>
            <div class="stat-card">
                <div class="stat-number" id="imgFiles">-</div>
                <div class="stat-label" data-i18n="img_files">图片</div>
                        </div>
        </section>

        <!-- 统计信息 - 手机端 -->
        <section class="stats-mobile">
            <div class="mobile-stats-line">
                <span class="mobile-stat"><span data-i18n="total_files">总文件</span>: <strong id="totalFilesMobile">-</strong></span>
                <span class="mobile-stat"><span data-i18n="total_size">总大小</span>: <strong id="totalSizeMobile">-</strong></span>
                <span class="mobile-stat"><span data-i18n="js_files">JS文件</span>: <strong id="jsFilesMobile">-</strong></span>
                <span class="mobile-stat"><span data-i18n="img_files">图片</span>: <strong id="imgFilesMobile">-</strong></span>
                    </div>
        </section>

        <!-- 文件网格 -->
        <section class="files-grid" id="filesGrid">
            <div class="loading">
                <div class="spinner"></div>
                </div>
        </section>
            </div>

    <!-- 图片全屏模态框 -->
    <div class="image-modal" id="imageModal">
        <button class="modal-close" id="modalClose">×</button>
        <img class="modal-image" id="modalImage" src="" alt="预览图片">
                </div>

    <!-- 文件详情模态框 -->
    <div class="file-info-modal" id="fileInfoModal">
        <div class="file-info-content">
            <div class="file-info-header">
                <h3 class="file-info-title" data-i18n="file_info_title">文件信息</h3>
                <button class="file-info-close" id="fileInfoClose">×</button>
                </div>
            <div class="file-info-body">
                <div class="file-info-preview" id="fileInfoPreview">
                    <div class="file-info-icon" id="fileInfoIcon">📄</div>
            </div>
                <div class="file-info-details">
                    <div class="file-detail-item">
                        <span class="detail-label" data-i18n="filename">文件名</span>
                        <span class="detail-value" id="detailFileName">-</span>
        </div>
                    <div class="file-detail-item">
                        <span class="detail-label" data-i18n="size">大小</span>
                        <span class="detail-value" id="detailFileSize">-</span>
            </div>
                    <div class="file-detail-item">
                        <span class="detail-label" data-i18n="type">类型</span>
                        <span class="detail-value" id="detailFileType">-</span>
            </div>
                    <div class="file-detail-item">
                        <span class="detail-label" data-i18n="modified_time">修改时间</span>
                        <span class="detail-value" id="detailModified">-</span>
            </div>
                    <div class="file-detail-item">
                        <span class="detail-label" data-i18n="location">位置</span>
                        <span class="detail-value" id="detailLocation">-</span>
            </div>
                    <div class="file-detail-item">
                        <span class="detail-label" data-i18n="link">链接</span>
                        <span class="detail-value detail-link" id="detailLink">-</span>
        </div>
    </div>
            </div>
            <div class="file-info-actions">
                <button class="btn btn-primary file-info-copy" id="fileInfoCopyBtn">
                    🔗 <span data-i18n="copy_link">复制链接</span>
                </button>
                <button class="btn btn-secondary file-info-cancel" id="fileInfoCancelBtn">
                    ✕ <span>关闭</span>
                </button>
            </div>
        </div>
    </div>

    <script>
        // 全局变量
        let allFiles = [];
        let currentFilter = 'all';
        let manifestData = null;

        // 文件类型图标映射
        const fileIcons = {
                javascript: '📄',
                stylesheet: '🎨',
                image: '🖼️',
            document: '📝',
                data: '📊',
            config: '⚙️',
            html: '🌐',
            other: '📄'
        };

        // 多语言配置
        let currentLanguage = localStorage.getItem('language') || 'zh-CN';
        let translations = {};

        // 初始化
        document.addEventListener('DOMContentLoaded', function() {
            initEventListeners();
            loadLanguage();
            loadFileManifest();
        });

        // 初始化事件监听器
        function initEventListeners() {
            // 搜索功能
            document.getElementById('searchInput').addEventListener('input', handleSearch);

            // 过滤标签
            document.querySelectorAll('.filter-tab').forEach(tab => {
                tab.addEventListener('click', handleFilterChange);
            });

            // 语言切换
            const langBtn = document.getElementById('langBtn');
            const langDropdown = document.getElementById('langDropdown');

            langBtn.addEventListener('click', function(e) {
                e.stopPropagation();
                langDropdown.classList.toggle('show');
                langBtn.classList.toggle('active');
            });

            document.addEventListener('click', function() {
                langDropdown.classList.remove('show');
                langBtn.classList.remove('active');
            });

            langDropdown.addEventListener('click', function(e) {
                if (e.target.classList.contains('lang-option')) {
                    const lang = e.target.dataset.lang;
                    if (lang && lang !== currentLanguage) {
                        switchLanguage(lang);
                    }
                    langDropdown.classList.remove('show');
                    langBtn.classList.remove('active');
                }
            });

            // 图片模态框
            const modal = document.getElementById('imageModal');
            const modalClose = document.getElementById('modalClose');

            modalClose.addEventListener('click', closeImageModal);
            modal.addEventListener('click', function(e) {
                if (e.target === modal) closeImageModal();
            });

            // 文件详情模态框
            const fileInfoModal = document.getElementById('fileInfoModal');
            const fileInfoClose = document.getElementById('fileInfoClose');
            const fileInfoCancel = document.getElementById('fileInfoCancelBtn');
            const fileInfoCopy = document.getElementById('fileInfoCopyBtn');

            fileInfoClose.addEventListener('click', closeFileInfoModal);
            fileInfoCancel.addEventListener('click', closeFileInfoModal);
            fileInfoModal.addEventListener('click', function(e) {
                if (e.target === fileInfoModal) closeFileInfoModal();
            });

            fileInfoCopy.addEventListener('click', function() {
                const link = document.getElementById('detailLink').textContent;
                copyToClipboard(link);
                closeFileInfoModal();
            });

            document.addEventListener('keydown', function(e) {
                if (e.key === 'Escape') {
                    closeImageModal();
                    closeFileInfoModal();
                }
            });
        }

        // 加载语言配置
        async function loadLanguage() {
            try {
                // 对于本地file://协议，直接使用内置翻译避免CORS错误
                if (window.location.protocol === 'file:') {
                    useFallbackLanguage();
                return;
            }

                const response = await fetch(`main/language.json?v=${Date.now()}`);
                if (response.ok) {
                    translations = await response.json();
                    applyLanguage();
                } else {
                    console.warn('语言文件加载失败，使用内置翻译');
                    useFallbackLanguage();
                }
            } catch (error) {
                console.warn('语言文件加载错误，使用内置翻译:', error);
                useFallbackLanguage();
            }
        }

        // 使用后备语言（内置完整翻译）
        function useFallbackLanguage() {
            translations = {
                "zh-CN": {
                    "title": "🚀 现代文件浏览器",
                    "subtitle": "最实用的床图/文件管理器(个人版) 完美适配 Cloudflare Pages 部署",
                    "search_placeholder": "搜索文件...",
                    "all_files": "全部文件",
                    "javascript": "JavaScript",
                    "css": "CSS",
                    "images": "图片",
                    "others": "其他",
                    "total_files": "总文件",
                    "total_size": "总大小",
                    "js_files": "JS文件",
                    "img_files": "图片",
                    "copy_link": "复制",
                    "details": "详情",
                    "no_files_found": "没有找到文件",
                    "manifest_loaded": "文件清单加载成功！",
                    "link_copied": "链接已复制到剪贴板！",
                    "loading": "加载中...",
                    "calculating": "计算中...",
                    "root_directory": "根目录",
                    "file_info_title": "文件信息",
                    "filename": "文件名",
                    "size": "大小",
                    "type": "类型",
                    "modified_time": "修改时间",
                    "location": "位置",
                    "link": "链接"
                },
                "en": {
                    "title": "🚀 Modern File Browser",
                    "subtitle": "The most practical image hosting/file manager (personal edition) perfectly adapted for Cloudflare Pages deployment",
                    "search_placeholder": "Search files...",
                    "all_files": "All Files",
                    "javascript": "JavaScript",
                    "css": "CSS",
                    "images": "Images",
                    "others": "Others",
                    "total_files": "Total Files",
                    "total_size": "Total Size",
                    "js_files": "JS Files",
                    "img_files": "Images",
                    "copy_link": "Copy",
                    "details": "Details",
                    "no_files_found": "No files found",
                    "manifest_loaded": "File manifest loaded successfully!",
                    "link_copied": "Link copied to clipboard!",
                    "loading": "Loading...",
                    "calculating": "Calculating...",
                    "root_directory": "Root Directory",
                    "file_info_title": "File Information",
                    "filename": "Filename",
                    "size": "Size",
                    "type": "Type",
                    "modified_time": "Modified Time",
                    "location": "Location",
                    "link": "Link"
                },
                "zh-TW": {
                    "title": "🚀 現代檔案瀏覽器",
                    "subtitle": "最實用的圖床/檔案管理器(個人版) 完美適配 Cloudflare Pages 部署",
                    "search_placeholder": "搜尋檔案...",
                    "all_files": "所有檔案",
                    "javascript": "JavaScript",
                    "css": "CSS",
                    "images": "圖片",
                    "others": "其他",
                    "total_files": "總檔案",
                    "total_size": "總大小",
                    "js_files": "JS檔案",
                    "img_files": "圖片",
                    "copy_link": "複製",
                    "details": "詳情",
                    "no_files_found": "找不到檔案",
                    "manifest_loaded": "檔案清單載入成功！",
                    "link_copied": "連結已複製到剪貼簿！",
                    "loading": "載入中...",
                    "calculating": "計算中...",
                    "root_directory": "根目錄",
                    "file_info_title": "檔案資訊",
                    "filename": "檔案名稱",
                    "size": "大小",
                    "type": "類型",
                    "modified_time": "修改時間",
                    "location": "位置",
                    "link": "連結"
                },
                "ja": {
                    "title": "🚀 モダンファイルブラウザ",
                    "subtitle": "最も実用的な画像ホスティング/ファイルマネージャー（個人版）Cloudflare Pagesデプロイに完全対応",
                    "search_placeholder": "ファイルを検索...",
                    "all_files": "すべてのファイル",
                    "javascript": "JavaScript",
                    "css": "CSS",
                    "images": "画像",
                    "others": "その他",
                    "total_files": "総ファイル数",
                    "total_size": "総サイズ",
                    "js_files": "JSファイル",
                    "img_files": "画像",
                    "copy_link": "コピー",
                    "details": "詳細",
                    "no_files_found": "ファイルが見つかりません",
                    "manifest_loaded": "ファイルマニフェストが正常に読み込まれました！",
                    "link_copied": "リンクをクリップボードにコピーしました！",
                    "loading": "読み込み中...",
                    "calculating": "計算中...",
                    "root_directory": "ルートディレクトリ",
                    "file_info_title": "ファイル情報",
                    "filename": "ファイル名",
                    "size": "サイズ",
                    "type": "タイプ",
                    "modified_time": "更新日時",
                    "location": "場所",
                    "link": "リンク"
                },
                "ko": {
                    "title": "🚀 현대적인 파일 브라우저",
                    "subtitle": "가장 실용적인 이미지 호스팅/파일 관리자(개인용) Cloudflare Pages 배포에 완벽 적응",
                    "search_placeholder": "파일 검색...",
                    "all_files": "모든 파일",
                    "javascript": "JavaScript",
                    "css": "CSS",
                    "images": "이미지",
                    "others": "기타",
                    "total_files": "총 파일",
                    "total_size": "총 크기",
                    "js_files": "JS 파일",
                    "img_files": "이미지",
                    "copy_link": "복사",
                    "details": "세부정보",
                    "no_files_found": "파일을 찾을 수 없습니다",
                    "manifest_loaded": "파일 매니페스트가 성공적으로 로드되었습니다!",
                    "link_copied": "링크가 클립보드에 복사되었습니다!",
                    "loading": "로딩 중...",
                    "calculating": "계산 중...",
                    "root_directory": "루트 디렉토리",
                    "file_info_title": "파일 정보",
                    "filename": "파일명",
                    "size": "크기",
                    "type": "유형",
                    "modified_time": "수정 시간",
                    "location": "위치",
                    "link": "링크"
                }
            };
            applyLanguage();
        }

        // 应用语言
        function applyLanguage() {
            const lang = translations[currentLanguage];
            if (!lang) {
                console.warn(`语言 ${currentLanguage} 不存在，使用中文`);
                currentLanguage = 'zh-CN';
                return applyLanguage();
            }

            // 更新页面文本
            document.querySelectorAll('[data-i18n]').forEach(element => {
                const key = element.getAttribute('data-i18n');
                if (lang[key]) {
                    element.textContent = lang[key];
                }
            });

            // 更新placeholder
            document.querySelectorAll('[data-i18n-placeholder]').forEach(element => {
                const key = element.getAttribute('data-i18n-placeholder');
                if (lang[key]) {
                    element.placeholder = lang[key];
                }
            });

            // 更新当前语言显示
            updateLanguageDisplay();
        }

        // 更新语言显示
        function updateLanguageDisplay() {
            const langNames = {
                'zh-CN': '中文',
                'en': 'English',
                'zh-TW': '繁體',
                'ja': '日本語',
                'ko': '한국어'
            };

            const currentLangElement = document.getElementById('currentLang');
            if (currentLangElement) {
                currentLangElement.textContent = langNames[currentLanguage] || '中文';
            }

            // 更新下拉选项的激活状态
            document.querySelectorAll('.lang-option').forEach(option => {
                option.classList.remove('active');
                if (option.dataset.lang === currentLanguage) {
                    option.classList.add('active');
                }
            });
        }

        // 切换语言
        function switchLanguage(lang) {
            if (translations[lang]) {
                currentLanguage = lang;
                localStorage.setItem('language', lang);
                applyLanguage();
                // 重新渲染文件列表以应用新语言
                if (allFiles.length > 0) {
                    renderFiles(document.getElementById('searchInput').value);
                }
            }
        }

        // 获取当前语言的翻译
        function getCurrentTranslation(key) {
            const lang = translations[currentLanguage];
            return lang ? lang[key] : null;
        }

        // 获取过滤后的文件
        function getFilteredFiles() {
            const searchTerm = document.getElementById('searchInput').value;
            let filteredFiles = allFiles;

            // 过滤器筛选
            if (currentFilter !== 'all') {
                filteredFiles = allFiles.filter(file => {
                    if (currentFilter === 'other') {
                        return !['javascript', 'stylesheet', 'image'].includes(file.category);
                    }
                    return file.category === currentFilter;
                });
            }

            // 搜索筛选
            if (searchTerm) {
                filteredFiles = filteredFiles.filter(file =>
                    file.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
                    file.description.toLowerCase().includes(searchTerm.toLowerCase())
                );
            }

            return filteredFiles;
        }

        // 加载文件清单
        async function loadFileManifest() {
            if (window.location.protocol === 'file:') {
                loadFallbackData();
                return;
            }

            try {
                const response = await fetch(`main/files-manifest.json?v=${Date.now()}`);
                if (!response.ok) throw new Error('清单加载失败');

                manifestData = await response.json();
                processManifestData();
                showToast('文件清单加载成功！');
            } catch (error) {
                console.warn('加载清单失败，使用默认数据:', error);
                loadFallbackData();
            }
        }

        // 处理清单数据
        function processManifestData() {
            allFiles = [];

            // 合并所有文件类型
            Object.keys(manifestData.files).forEach(category => {
                if (manifestData.files[category] && Array.isArray(manifestData.files[category])) {
                    manifestData.files[category].forEach(file => {
                        allFiles.push({
                            ...file,
                            category: category === 'javascript' ? 'javascript' :
                                     category === 'stylesheet' ? 'stylesheet' :
                                     category === 'image' ? 'image' :
                                     category === 'document' ? 'document' :
                                     category === 'data' ? 'data' :
                                     category === 'config' ? 'config' : 'other'
                        });
                    });
                }
            });

            updateStats();
            renderFiles();
        }

        // 加载后备数据
        function loadFallbackData() {
            allFiles = [
                // JavaScript 文件 (3个)
                { name: 'app.min.js', size: '890 B', type: 'javascript', category: 'javascript', lastModified: '2025-06-28', description: 'JavaScript文件 - app.min', path: './source/app.min.js', folder: '.' },
                { name: 'demo.js', size: '204 B', type: 'javascript', category: 'javascript', lastModified: '2025-06-28', description: 'JavaScript文件 - demo', path: './source/demo.js', folder: '.' },
                { name: 'utils.js', size: '1.4 KB', type: 'javascript', category: 'javascript', lastModified: '2025-06-28', description: 'JavaScript文件 - utils', path: './source/utils.js', folder: '.' },

                // CSS 文件 (1个)
                { name: 'demo.css', size: '256 B', type: 'stylesheet', category: 'stylesheet', lastModified: '2025-06-28', description: 'CSS样式文件 - demo', path: './source/styles/demo.css', folder: 'styles' },

                // 图片文件 (4个)
                { name: 'a685db44f09a8ee559a5d9d94fce6103--2367605914.jpg', size: '1.9 MB', type: 'image', category: 'image', lastModified: '2025-06-28', description: '图片文件 - a685db44f09a8ee559a5d9d94fce6103--2367605914', path: './source/a685db44f09a8ee559a5d9d94fce6103--2367605914.jpg', folder: '.' },
                { name: 'a.jpg', size: '784.3 KB', type: 'image', category: 'image', lastModified: '2025-06-28', description: '图片文件 - a', path: './source/img/a.jpg', folder: 'img' },
                { name: 'b.jpg', size: '116 KB', type: 'image', category: 'image', lastModified: '2025-06-28', description: '图片文件 - b', path: './source/img/b.jpg', folder: 'img' },
                { name: 'c.jpg', size: '691.1 KB', type: 'image', category: 'image', lastModified: '2025-06-28', description: '图片文件 - c', path: './source/img/c.jpg', folder: 'img' },

                // 文档文件 (3个)
                { name: 'legacy-README.md', size: '432 B', type: 'document', category: 'other', lastModified: '2025-06-28', description: '文档文件 - legacy-README', path: './source/docs/legacy-README.md', folder: 'docs' },
                { name: 'README.md', size: '442 B', type: 'document', category: 'other', lastModified: '2025-06-28', description: '说明文档', path: './source/docs/README.md', folder: 'docs' },
                { name: 'README.md', size: '432 B', type: 'document', category: 'other', lastModified: '2025-06-28', description: '说明文档', path: './source/README.md', folder: '.' },

                // 数据文件 (3个)
                { name: 'app-config.json', size: '1.1 KB', type: 'data', category: 'other', lastModified: '2025-06-28', description: '数据文件 - app-config', path: './source/config/app-config.json', folder: 'config' },
                { name: 'config.json', size: '1.1 KB', type: 'data', category: 'other', lastModified: '2025-06-28', description: '配置文件', path: './source/config.json', folder: '.' },
                { name: 'config.json', size: '469 B', type: 'data', category: 'other', lastModified: '2025-06-28', description: '配置文件', path: './source/data/config.json', folder: 'data' }
            ];

            updateStats();
            renderFiles();
        }

        // 更新统计信息
        function updateStats() {
            const stats = {
                total: allFiles.length,
                js: allFiles.filter(f => f.category === 'javascript').length,
                css: allFiles.filter(f => f.category === 'stylesheet').length,
                img: allFiles.filter(f => f.category === 'image').length,
                other: allFiles.filter(f => !['javascript', 'stylesheet', 'image'].includes(f.category)).length
            };

            const totalSize = manifestData ? manifestData.statistics.total_size : '计算中...';

            // 更新PC端统计信息
            document.getElementById('totalFiles').textContent = stats.total;
            document.getElementById('totalSize').textContent = totalSize;
            document.getElementById('jsFiles').textContent = stats.js;
            document.getElementById('imgFiles').textContent = stats.img;

            // 更新手机端统计信息
            document.getElementById('totalFilesMobile').textContent = stats.total;
            document.getElementById('totalSizeMobile').textContent = totalSize;
            document.getElementById('jsFilesMobile').textContent = stats.js;
            document.getElementById('imgFilesMobile').textContent = stats.img;
        }

        // 渲染文件列表
        function renderFiles(searchTerm = '') {
            const grid = document.getElementById('filesGrid');
            let filteredFiles = allFiles;

            // 过滤器筛选
            if (currentFilter !== 'all') {
                filteredFiles = allFiles.filter(file => {
                    if (currentFilter === 'other') {
                        return !['javascript', 'stylesheet', 'image'].includes(file.category);
                    }
                    return file.category === currentFilter;
                });
            }

            // 搜索筛选
            if (searchTerm) {
                filteredFiles = filteredFiles.filter(file =>
                    file.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
                    file.description.toLowerCase().includes(searchTerm.toLowerCase())
                );
            }

            if (filteredFiles.length === 0) {
                grid.innerHTML = `
                    <div class="empty-state">
                        <div class="empty-icon">📭</div>
                        <div class="empty-text">${getCurrentTranslation('no_files_found') || '没有找到文件'}</div>
                    </div>
                `;
                return;
            }

            grid.innerHTML = filteredFiles.map(file => createFileCard(file)).join('');
        }

        // 创建文件卡片
        function createFileCard(file) {
            const isImage = file.category === 'image';
            const filePath = getFilePath(file);
            const icon = fileIcons[file.category] || fileIcons.other;

            return `
                <div class="file-card" onclick="${isImage ? '' : `copyToClipboard('${filePath}')`}">
                    <div class="file-icon-area">
                        ${isImage ?
                            `<img class="image-preview" src="${filePath}" alt="${file.name}"
                                  onclick="openImageModal(event, '${filePath}', '${file.name}')"
                                  onerror="this.style.display='none'; this.nextElementSibling.style.display='block';">
                             <div class="file-icon" style="display:none;">${icon}</div>` :
                            `<div class="file-icon">${icon}</div>`
                        }
                    </div>
                    <div class="file-info">
                        <div class="file-name" title="${file.name}">${file.name}</div>
                        <div class="file-meta" title="${file.lastModified} • ${file.folder === '.' ? getCurrentTranslation('root_directory') || '根目录' : file.folder}">${file.lastModified} • ${file.folder === '.' ? getCurrentTranslation('root_directory') || '根目录' : file.folder}</div>
                        <div class="file-size">${file.size}</div>
                        <div class="file-actions">
                            <button class="btn btn-primary" onclick="copyToClipboard('${filePath}')">
                                🔗 ${getCurrentTranslation('copy_link') || '复制'}
                            </button>
                            ${isImage ? '' : `<button class="btn btn-secondary" onclick="showFileInfo(event, '${JSON.stringify(file).replace(/"/g, '&quot;')}')">
                                ℹ️ ${getCurrentTranslation('details') || '详情'}
                            </button>`}
                        </div>
                    </div>
                </div>
            `;
        }

        // 获取文件路径
        function getFilePath(file) {
            if (file.folder === '.' || file.folder === '根目录') {
                return `source/${file.name}`;
            }
            return `source/${file.folder}/${file.name}`;
        }

        // 打开图片模态框
        function openImageModal(event, imagePath, fileName) {
            event.stopPropagation();
            const modal = document.getElementById('imageModal');
            const modalImage = document.getElementById('modalImage');

            modalImage.src = imagePath;
            modalImage.alt = fileName;
            modal.style.display = 'flex';
        }

        // 关闭图片模态框
        function closeImageModal() {
            document.getElementById('imageModal').style.display = 'none';
        }

        // 关闭文件详情模态框
        function closeFileInfoModal() {
            document.getElementById('fileInfoModal').style.display = 'none';
        }

        // 复制到剪贴板
        function copyToClipboard(path) {
            // 如果传入的已经是完整URL，直接使用；否则构建完整URL
            const textToCopy = path.startsWith('http') ? path : `${window.location.origin}/${path}`;

            navigator.clipboard.writeText(textToCopy).then(() => {
                showToast(getCurrentTranslation('link_copied') || '链接已复制到剪贴板！');
            }).catch(() => {
                // 降级方案
                const textArea = document.createElement('textarea');
                textArea.value = textToCopy;
                document.body.appendChild(textArea);
                textArea.select();
                document.execCommand('copy');
                document.body.removeChild(textArea);
                showToast(getCurrentTranslation('link_copied') || '链接已复制到剪贴板！');
            });
        }

        // 显示文件信息
        function showFileInfo(event, fileDataStr) {
            event.stopPropagation();
            const file = JSON.parse(fileDataStr.replace(/&quot;/g, '"'));
            const filePath = getFilePath(file);
            const fullUrl = `${window.location.origin}/${filePath}`;

            // 更新模态框内容
            document.getElementById('detailFileName').textContent = file.name;
            document.getElementById('detailFileSize').textContent = file.size;
            document.getElementById('detailFileType').textContent = file.description;
            document.getElementById('detailModified').textContent = file.lastModified;
            document.getElementById('detailLocation').textContent = file.folder === '.' ? getCurrentTranslation('root_directory') || '根目录' : file.folder;
            document.getElementById('detailLink').textContent = fullUrl;

            // 更新图标或预览
            const fileInfoPreview = document.getElementById('fileInfoPreview');
            const fileInfoIcon = document.getElementById('fileInfoIcon');

            // 清除之前的内容
            fileInfoPreview.innerHTML = '';

            if (file.category === 'image') {
                // 如果是图片，显示预览
                const img = document.createElement('img');
                img.src = filePath;
                img.alt = file.name;
                img.onerror = function() {
                    // 图片加载失败时显示图标
                    fileInfoPreview.innerHTML = `<div class="file-info-icon">${fileIcons[file.category] || fileIcons.other}</div>`;
                };
                fileInfoPreview.appendChild(img);
            } else {
                // 非图片文件显示图标
                fileInfoPreview.innerHTML = `<div class="file-info-icon">${fileIcons[file.category] || fileIcons.other}</div>`;
            }

            // 显示模态框
            document.getElementById('fileInfoModal').style.display = 'flex';
        }

        // 处理搜索
        function handleSearch(event) {
            renderFiles(event.target.value);
        }

        // 处理过滤器变化
        function handleFilterChange(event) {
            document.querySelectorAll('.filter-tab').forEach(tab => tab.classList.remove('active'));
            event.target.classList.add('active');
            currentFilter = event.target.dataset.filter;
            renderFiles(document.getElementById('searchInput').value);
        }

        // 显示提示消息
        function showToast(message) {
            const existingToast = document.querySelector('.toast');
            if (existingToast) {
                existingToast.remove();
            }

            const toast = document.createElement('div');
            toast.className = 'toast';
            toast.textContent = message;
            document.body.appendChild(toast);

            setTimeout(() => {
                toast.remove();
            }, 3000);
        }
    </script>
</body>
</html>

